<template>
    <div class="flex-between">
        <div id="title" class="flex items-center">{{ props.title }}</div>
        <div>
            <a-range-picker v-model:value="timer" />
        </div>
    </div>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
    title: string,
    isDefaultTime?: boolean,
    section?: string | number
}>(), {
    isDefaultTime: true,
    section: 7
})

const timer = ref()
</script>

<style scoped lang="scss">
@import '/src/sass/variables.module';

#title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 8px;
    background-color: $blue;
}

:deep(.ant-picker-input) {
    width: auto;
}
</style>